#header {
    background-size: cover;
    background-position-x: center;
    background-position-y: bottom;
    height: 100vh;
}

#header .container {
    display: table;
    height: 100%;
}

#header .page-title {
    display: table-cell;
    vertical-align: middle;
}

.popover {
    letter-spacing: 2px;
}

.jumbotron {
    border-radius: 0;
}

.jumbotron h1 {
    text-shadow: 1px 1px 1px #000;
}

.jumbotron h1.display-1 {
    letter-spacing: 3rem;
}

.jumbotron h2.display-4 {
    letter-spacing: 1rem;
    font-family: '宋体';
    border-bottom: 2px solid #fff;
}

.section {
    background-attachment: fixed;
    background-size: cover;
    padding-top: 15em;
    padding-bottom: 15em;
}

.section h2.display-3 {
    text-shadow: 1px 1px 1px #333;
    text-align: center;
}

.blockquote,
.markdown,
.chart {
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
}

.blockquote {
    position: relative;
    padding: 0 3rem;
}

.blockquote::before,
.blockquote::after{
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
}

.blockquote.blockquote-top::before {
    border-top: 10px double #eee;
    border-left: 10px double #eee;
    top: -50px;
    left: 0;
}

.blockquote.blockquote-top::after {
    border-bottom: 10px double #eee;
    border-right: 10px double #eee;
    bottom: 10px;
    right: 0;
}

.blockquote.blockquote-bottom::before {
    border-top: 10px double #eee;
    border-right: 10px double #eee;
    top: -50px;
    right: 0;
}

.blockquote.blockquote-bottom::after {
    border-bottom: 10px double #eee;
    border-left: 10px double #eee;
    bottom: -50px;
    left: 0;
}

.markdown p,
.blockquote p {
    font-family: 'Times New Roman', '宋体';
    color: #263238;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 1rem;
    letter-spacing: 2px;
}

.markdown .img {
    max-width: 100%;
}

.chard-title h3 {
    font-size: 18px;
    font-weight: bolder;
    color: #333;
}

.chard-title p {
    margin: 0;
    font-size: 12px;
    color: #aaa;
}

#idCard {
    width: 450px;
    margin: 30px auto;
}

#idCard .card-body {
    padding: 50px 0 50px 50px;
}

#idCard .card-body p {
    letter-spacing: 2px;
}

#idCard .card-body span {
    color: #999;
    cursor: pointer;
}

.card-img-right {
    padding-top: 50px;
    padding-right: 50px;
}

#map {
    max-width: 100%;
    width: 800px;
    height: 600px;
    margin: 0 auto;
}

#populationLineChart,
#reasonPieChart
{
    max-width: 100%;
    height: 500px;
    margin: 0 auto;
}

#aloneReasonImage {
    width: 690px;
}

#aloneReasonImage img {
    height: 80px;
}

#selfEvaluateChart {
    max-width: 100%;
    height: 320px;
    margin: 0 auto;
}

#monthlyIncomeCircleChart,
#newsReportCountChart
{
    max-width: 100%;
    height: 400px;
    margin: 0 auto;
}

#incomeSourceBarChart,
#activityTreeMap
{
    max-width: 100%;
    height: 450px;
    margin: 0 auto;
}

#incomeEnoughOrNotChart {
    max-width: 100%;
    width: 500px;
    margin: 0 auto;
}

#typeA img,
#typeB img,
#typeC img {
    width: 128px;
    margin: 0 auto 1.25rem;
}

#typeA p,
#typeB p,
#typeC p {
    margin-bottom: 0;
    font-size: 12px;
}

#player {
    position: fixed;
    bottom: 20px;
}

.footer {
    background: #546e7a;
}
